<div class="right-container events-sidebar" ng-hide="sidebarCollapsed">
  <div class="sidebar-header right-header">
    <div>      
      <h2>
        <span class="events-sidebar-collapse"><a href="" class="fa fa-arrow-circle-o-right" title="Collapse event sidebar" ng-click="collapseSidebar()"><span class="sr-only">Collapse event sidebar</span></a></span>        
        Events
        <small ng-if="warningCount" class="warning-count">
          <span class="pficon pficon-warning-triangle-o"></span>
          {{warningCount}}
          <span class="hidden-xs hidden-sm">
            <span ng-if="warningCount === 1">warning</span>
            <span ng-if="warningCount > 1">warnings</span>
          </span>
        </small>
      </h2>
    </div>
    <div ng-if="events | hashSize" class="event-details-link">
      <a ng-href="project/{{projectContext.projectName}}/browse/events">View Details</a>
    </div>
  </div>
  <div class="right-content">
    <div ng-if="!events" class="events pad-left-xl">
      Loading...
    </div>
    <div ng-if="events" class="events">
      <div ng-if="!(events | hashSize)" class="mar-left-xl">
        <em>No events.</em>
      </div>
      <div ng-repeat="event in events track by (event | uid)" class="event animate-repeat" ng-class="{'highlight': highlightedEvents[event.involvedObject.kind + '/' + event.involvedObject.name]}">
        <span class="sr-only">{{event.type}}</span>
        <div class="event-icon" aria-hidden="true">
          <div ng-switch="event.type" class="hide-ng-leave">
            <span ng-switch-when="Warning" class="pficon pficon-warning-triangle-o"></span>
            <span ng-switch-when="Normal" class="pficon pficon-info text-muted"></span>
          </div>
        </div>
        <div class="event-details">
          <div class="detail-group">
            <div class="event-reason">
              {{event.reason | sentenceCase}}
            </div>
            <div class="event-object">
              {{event.involvedObject.kind | abbreviateKind}}/{{event.involvedObject.name}}
            </div>
          </div>
          <div class="detail-group">
            <div class="event-message">
              {{event.message}}
            </div>
            <div class="event-timestamp">
              <relative-timestamp timestamp="event.lastTimestamp"></relative-timestamp>
            </div>
          </div>
          <div ng-if="event.count > 1" class="text-muted small">
            {{event.count}} times in the last
            <duration-until-now timestamp="event.firstTimestamp" omit-single="true" precision="1"></duration-until-now>
          </div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
